<template>
  <div class="about">
<!--    <img v-for="(img,index) in images" :src="img" width="200" alt=""> <br>-->
    <img v-for="(item,index) in images" :key="index" :src="item.url" width="100" @click="imageView(index)">
  </div>
</template>

<script>
export default {
  name:"about",
  components:{

  },
  data(){
    return {
      currentImageIndex:0,
      images:[
        {url: require('../assets/1.png'),},
        {url: require('../assets/2.png'),},
        {url: require('../assets/3.png'),},
        {url: require('../assets/4.png'),},
        {url: require('../assets/1.png'),},
        {url: require('../assets/2.png'),},
        {url: require('../assets/3.png'),},
        {url: require('../assets/4.png'),},
        {url: require('../assets/1.png'),},
        {url: require('../assets/2.png'),},
        {url: require('../assets/3.png'),},
        {url: require('../assets/4.png'),},
        {url: require('../assets/1.png'),},
        {url: require('../assets/2.png'),},
        {url: require('../assets/3.png'),},
        {url: require('../assets/4.png'),},
        // require('../assets/1.png'),
        // require('../assets/2.png'),
        // require('../assets/3.png'),
        // require('../assets/4.png'),
      ]
    }
  },
  created () {
    this.$imageViewer.images(this.images);
  },
  methods:{
    imageView(index) {
      this.$imageViewer.index(index);
      this.$imageViewer.show();
    }
  },
  mounted () {
    // console.log('ImageViewer',ImageViewer)
    // console.log('$ImageViewer',this.$imageViewer)
  }
}
</script>
